<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>左右点击切换</title>
    <style>
        #container {
            /*width: 1440px;*/
            height: 60px;
            background-color: pink;
            position: relative;
            /*padding: 0 300px;*/
        }


        .box {
            width: 150px;
            height: 50px;
            background-color: cyan;
            padding-right: 10px;
            float: left;
            margin-top: 5px;
        }

        #main {
            overflow: hidden;
            height: 60px;
            /*max-width: 950px;*/
            /*overflow: hidden;*/
            position: relative;
        }
        #main:after {
            content: '';
            width: 50px;
            height: 50px;
            position: absolute;
            /*right: -50px;*/
            /*top: 0;*/
            background: linear-gradient(to left, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
            margin-top: 5px;
        }
        #main:before {
            content: '';
            width: 50px;
            height: 50px;
            position: absolute;
            /*left: 0;*/
            background: linear-gradient(to right, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
            margin-top: 5px;
        }

        .btn {
            position: absolute;
            height: 100%;
            width: 50px;
            z-index: 100;
        }

        .btn.left {
            left: 0;
        }

        .btn.right {
            right: 0;
            top: 0;
        }
    </style>
</head>
<body>


<script>
    window.onload = () => {
        const oContainer = document.querySelector('#container')
        const oBoxs = [...oContainer.querySelectorAll('.box')]
        const oMain = document.querySelector('#main')
        const oBtnLeft = document.querySelector('.btn.left')
        const oBtnRight = document.querySelector('.btn.right')
        console.log(oBtnRight)


        setTimeout(() => {
            let width = 0, marginRight = oBoxs[0].style.marginRight
            oBoxs.map(item => {
                width += item.offsetWidth + (oBoxs.length - 1) * marginRight
            })
            console.log(width)
        }, 100)

        oBtnLeft.addEventListener('click', function () {
            console.log('left')

            const offsetLeft = oMain.offsetLeft
            oMain.style.marginLeft = (offsetLeft - 160) + 'px'
        }, false)


        oBtnRight.addEventListener('click', function () {
            console.log('right')
            const offsetLeft = oMain.offsetLeft
            if (offsetLeft >= 300) return
            oMain.style.marginLeft = (offsetLeft + 160) + 'px'
        }, true)
    }

</script>

<div id="container">
    <div class="btn left"> <</div>
    <div id="main">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">3</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
        <div class="box">7</div>
        <div class="box">8</div>
        <div class="box">9</div>
        <div class="box">10</div>
        <div class="box">11</div>
        <div class="box">12</div>
        <div class="box">13</div>
        <div class="box">14</div>
        <div class="box">16</div>
        <div class="box">16</div>
        <div class="box">17</div>
    </div>
    <div class="btn right"> ></div>
</div>
</body>
</html>
